<template>
	<view>
		<l-painter
				css="width: 640rpx; padding-bottom: 35rpx; background-color: #ffffff; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15);border-radius: 10rpx;"
				isCanvasToTempFilePath @success="handleSuccess" @fail="handleFail" custom-style="position: fixed; left: 200%">
				
			<l-painter-view v-if="type=='2'" css="`display: ${type == '2'? 'inline-block' : 'none'}; `">
				
				<l-painter-image :src="config.avatar" :v-show="config.avatar"
								 css="margin: 15rpx; width: 62rpx;  height: 62rpx; border-radius: 50%;" />
				<l-painter-view css="margin-top: 30rpx; padding-left: 5rpx; display: inline-block" :v-show="config.nickname">
					<l-painter-text :text="`${config.nickname}的小店`"
									css="display: block; padding-bottom: 10rpx; color: #333333;magin-left: 5rpx;font-size: 28rpx;line-clamp:1;width: 100%;" />
				</l-painter-view>
				
				<l-painter-image :src="config.image"
								 css="object-fit: cover; object-position: center; width: 640rpx; height: 800rpx;border-radius:10rpx 10rpx 0 0" />

				<l-painter-view css="margin-top: 10rpx;">
					<!-- 商品分享海报文字内容 /1商品 /2店铺 /3开店 /4素材 -->
					
					<l-painter-image :src="config.avatar" :v-show="config.avatar"
							css="display:inline-block;margin-top: 30rpx; margin-left: 15rpx;margin-right: 15rpx;  width: 72rpx;  height: 72rpx; border-radius: 50%;magin-left:10rpx" />
					<l-painter-view :css="`display: ${type == '2'? 'inline-block' : 'none'}; width: 435rpx;`">
						<l-painter-view
							:css="`vertical-align: bottom; color: #00632B; font-size: 30rpx; line-height: 1em;magan-top:60rpx`">
						</l-painter-view>
						
						<l-painter-view css="margin-top:30rpx;">
							
							<l-painter-text
								css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 340rpx; padding-right:22rpx; box-sizing: border-box"
								:text="config.slogin"></l-painter-text>
								<l-painter-text text="长按识别二维码"
												css="display: block; padding-top: 10rpx; color: #999999;font-size: 24rpx;" />
						</l-painter-view>
					</l-painter-view>
	
					<l-painter-view css="display: inline-block;margin-top: 30rpx; margin-right: 10rpx; ">
						
						<!-- #ifdef MP -->
						<l-painter-image :src="qrcode" css="width: 88rpx; height: 88rpx;" />
						<!--  #endif -->
						
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
			<l-painter-view v-else css="`display: ${type == '1'|| type == '3'||type == '4'? 'inline-block' : 'none'}; padding-left: 40rpx;`">
				<l-painter-image :src="config.avatar" :v-show="config.avatar"
								 css="margin: 15rpx; width: 62rpx;  height: 62rpx; border-radius: 50%;" />
				<l-painter-view css="margin-top: 30rpx; padding-left: 5rpx; display: inline-block" :v-show="config.nickname">
					<l-painter-text :text="`来自${config.nickname}小店的分享`"
									css="display: block; padding-bottom: 10rpx; color: #333333;magin-left: 5rpx;font-size: 28rpx;line-clamp:1;width: 100%;" />
				</l-painter-view>
				<l-painter-image :src="config.image"
								 css="object-fit: cover; object-position: center; width: 560rpx; height: 560rpx;margin-top: 15rpx;" />
			
				<l-painter-view css="margin-top: 10rpx;">
					<!-- 商品分享海报文字内容 /1商品 /2店铺 /3开店 /4素材 -->
					<l-painter-view :css="`display: ${type == '1' ? 'inline-block' : 'none'}; width: 400rpx;`">
						<l-painter-text text="￥" css="vertical-align: bottom;font-size: 28rpx;" />
						<l-painter-text :text="price.prev" css="vertical-align: bottom; font-size: 38rpx;" />
						<l-painter-text :text="price.next" css="vertical-align: bottom; font-size: 30rpx;" />
						<!-- <l-painter-text :text="marketPrice"
										css="vertical-align: bottom; padding-left: 10rpx;font-size: 28rpx; font-weight: normal; text-decoration: line-through; --> color: #999999" />
						<!-- <l-painter-view
							:css="`vertical-align: bottom; color: #00632B; font-size: 30rpx; line-height: 1em;`"
						</l-painter-view> -->
						<l-painter-view css="margin-top:30rpx;">
							<l-painter-text
									css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
									:text="config.name"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
					<l-painter-view :css="`display: ${type == '2'? 'inline-block' : 'none'}; width: 400rpx;`">
						
						<l-painter-view
							:css="`vertical-align: bottom; color: #00632B; font-size: 30rpx; line-height: 1em;magan-top:60rpx`">
						</l-painter-view>
						
						<l-painter-view css="margin-top:30rpx;">
							
							<l-painter-text
								css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
								:text="config.slogin"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
					
					<!-- 砍价分享海报文字内容 -->
					<l-painter-view :css="`display: ${type == '3' ? 'inline-block' : 'none'}; width: 400rpx;`">
						<l-painter-view>
							<l-painter-text
									:css="`line-clamp: 2; color: #00632B; line-height: 1.5em;font-size: 32rpx; width: 375rpx; padding-right:22rpx;margin-top:30rpx; box-sizing: border-box`"
									text="加入我们"></l-painter-text>
						</l-painter-view>
						<l-painter-view css="margin-top:8rpx;">
							
						</l-painter-view>
						<l-painter-view css="margin-top:8rpx;">
							<l-painter-text
									css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 28rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
									:text="config.name"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
			
					<l-painter-view :css="`display: ${type == '4'? 'inline-block' : 'none'}; width: 400rpx; `">
						<l-painter-view
								:css="`vertical-align: bottom; color: #00632B; font-size: 30rpx; line-height: 1em;magan-top:60rpx;padding-top:50rpx;`">
			
							<l-painter-text
									css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
									:text="config.name"></l-painter-text>
			
						</l-painter-view>
						<l-painter-view css="margin-top:30rpx;">
							<l-painter-text
									css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
									:text="config.slogin"></l-painter-text>
						</l-painter-view>
					</l-painter-view>
			
					<l-painter-view css="display: inline-block; ">
						
						<!-- #ifdef MP -->
						<l-painter-image :src="qrcode" css="width: 168rpx; height: 168rpx;" />
						<!--  #endif -->
						<l-painter-text text="长按识别二维码"
										css="display: block; padding-top: 10rpx; color: #999999;font-size: 24rpx;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>

	import lPainter from '@/components/lime-painter/components/l-painter/l-painter.vue'
	import lPainterImage from '@/components/lime-painter/components/l-painter-image/l-painter-image.vue'
	import lPainterText from '@/components/lime-painter/components/l-painter-text/l-painter-text.vue'
	import lPainterView from '@/components/lime-painter/components/l-painter-view/l-painter-view.vue'
	export default {
		name: "share-poster",
		components: {
			lPainter,
			lPainterImage,
			lPainterText,
			lPainterView,
		},
		props: {
			config: {
				type: Object,
				default: () => ({})
			},
			shareId: {
				type: [Number, String],
				default: ''
			},
			qrcode: {
				type: [String],
				default: ''
			},
			pagePath:{
				type: String,
				default: ''
			},
			link: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'goods'
			}
		},
		data() {
			return {

			};
		},
		computed: {
			price() {
				let {
					price
				} = this.config
				console.log('==========this.config==========')
				console.log(this.config)
				console.log('type',this.type)
				if (price == undefined) return {}
				price = String(parseFloat(price)).split('.')
				return {
					prev: price[0],
					next: price[1] ? `.${price[1]}` : ''
				}
			},
			marketPrice() {
				return `￥${parseFloat(this.config.marketPrice)}`
			}
		},
		methods: {
			handleSuccess(val) {
				this.$emit('success', val)
			},
			handleFail(err) {
				this.$emit('fail')
			}
		}
	}
</script>

<style>

</style>
